<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>常用标签</title>
</head>
<body>
    <p id="No.1">来了老弟-锚点链接test</p>
    标题标签: h1-h6
    <h1 style="color: green;">h1</h1>
    <h2>h2</h2>
    <h3>h3</h3>
    <h4>h4</h4>
    <h5>h5</h5>
    <h6>h6</h6>

    段落
    <p>这是一个段落，段落与段落之间有一定的距离</p>

    换行
    <br/>
    br 是一个单标签(不需要结束标签)

    <p>
        格式化标签  
        <br/>
        <strong>strong 加粗</strong> 
        <br/>
        <b>b 加粗</b>
        <br/>
        <em>em 倾斜</em>
        <br/>
        <i>i 倾斜</i>
        <br/>
        <del>del 删除线</del>
        <br/>
        <s>s 删除线</s>
        <br/>
        <ins>ins 下划线</ins>
        <br/>
        <u>u 下划线</u>
    </p>

    图片标签
    <br/>
    <img src ="E:/桌面/javaweb/HEML/蜡笔小新.jpg" 
    alt="替换文本-》文件不能正常显示是出现的替换文字"
    title="这是蜡笔小新,鼠标放上去就会有提示"     
    width="200px"
    height=""
    border="50px"
    > 
    <!-- width  height ->控制宽度高度. 高度和宽度一般改一个就行, 
        另外一个会等比例缩放. 否则就会图片失衡.
        border  边框, 参数是宽度的像素
    -->
    <img src ="./../../ccccccccccs/蜡笔小新.jpg" >

    链接标签 a
    <!-- href必须具备--表示跳转到哪里 -->
    <br>
    <a href="www.baidu.com">点我跳不到百度</a>
    <br>
    <a href="https://www.baidu.com">        点我跳到百度            </a>
    <br>
    <a href="http://www.baidu.com" target="_blank">点我，新的标签页跳到百度</a>
    <br>
    <a href="http://www.baidu.com" target="_self">点我，还是这个标签页跳到百度，默认就是_self</a>
    <br>
    <a href="蜡笔小新.jpg">蜡笔小新.jpg</a>
    <br>
    网页元素链接: 可以给图片等任何元素
    添加链接(把元素放到 a 标签中)
    <a href="http://www.baidu.com">
        <img src="蜡笔小新.jpg" width="25px">
    </a>
    <br>
    <a href="javascript:void(0);">禁止 a 标签跳转</a>
    <br>
    <a href="#No.1">锚点链接: 可以快速定位到页面中的某个id="xx"的位置</a>
    <br>
    <a href="#哈哈">123456</a>
    <br>
    表格
    <br>
    <table align="center" border="1" cellpadding="20" cellspacing="" width="500"
    height="100">
        <thead>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
        </thead>
        <tbody>
            <tr>
            <td>张三</td>
            <td>男</td>
            <td>10</td>
        </tr>
        <tr>
            <td>李四</td>
            <td id="哈哈">女</td>
            <td>11</td>
        </tr>
        </tbody>
    </table>
    <table align="center" border="10" cellpadding="50" cellspacing="0" width="200"
height="500">
    <tr>
        <td>姓名</td>
        <td>性别</td>
        <td>年龄</td>
    </tr>
    <tr>
        <td rowspan="2">张三</td>
        <td colspan="2">男</td>
    </tr>
    <tr>
        <td>李四</td>
        <td>女</td>
        <td>11</td>
    </tr>
</table>
<!-- table 标签: 表示整个表格
tr: 表示表格的一行
td: 表示一个单元格
th: 表示表头单元格. 会居中加粗
thead: 表格的头部区域(注意和 th 区分, 范围是比 th 要大的)
tbody: 表格得到主体区域 -->
<!-- table 标签中:
align 是表格相对于周围元素的对齐方式. align="center" (不是内部元素的对齐方式)
border 表示边框. 1 表示有边框(数字越大, 边框越粗), "" 表示没边框.
cellpadding: 内容距离边框的距离, 默认 1 像素
cellspacing: 单元格之间的距离. 默认为 2 像素
width / height: 设置尺寸 -->
</body>
</html>